<template>
  <div class="supermarket-container">
    <div class="img-box">
      <img src="../../assets/img/common/pic1.png" alt="" />
    </div>
    <div class="product-box">
      <div class="product-item" v-for="item in productList" :key="item.id">
        <div class="imgs">
          <img :src="getImg(item.img)" alt="" />
        </div>
        <div class="describe">
          <p>{{ item.title }}</p>
          <p>{{ item.location }}</p>
        </div>
        <div class="count">
          <p>单价：{{ item.price }}</p>
          <el-button type="primary" @click="toBuy(item)">购买</el-button>
        </div>
      </div>
      <!-- 购买对话框 -->
      <el-dialog :title="this.item.title" :visible.sync="dialogVisible" width="30%">
        <p>单价：{{ this.item.price }}</p>
        <div class="buy">
          <span>购买数量：</span>
          <el-input-number v-model="num" @change="handleChange" :min="0" :max="999" label="购买数量"></el-input-number>
        </div>
        <div class="btn-buy">
          <el-button type="primary" @click="commit"> 确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import commonServe from '@/api/service/common.serve'
import staticServe from '../../api/service/static.serve'
import { getImg } from '../../utils/getImg'
export default {
  data() {
    return {
      id: window.sessionStorage.getItem('studentId'),
      productList: [],
      dialogVisible: false,
      item: {}, //每一项的内容
      num: '', //购买数量
      cardStatus: '',
      balance: '',
      tag: ''
    }
  },
  created() {
    this.getSupermarketList()
    this.getCardInfo()
  },
  methods: {
    getImg,
    getSupermarketList() {
      staticServe.getSupermarketList().then((res) => {
        // console.log(res)
        this.productList = res
      })
    },
    toBuy(val) {
      this.dialogVisible = true
      this.item = val
    },
    handleChange(e) {
      this.num = e
    },
    // 获取一卡通信息
    getCardInfo() {
      commonServe
        .getCardInfo(this.id)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.tag = res.data.card.tag
            this.cardStatus = res.data.card.cardStatus
            this.balance = res.data.card.balance
          } else {
            this.$message.warning('获取一卡通信息失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },
    //
    commit() {
      let total = this.item.price * this.num
      console.log(total) //总价格
      if (!this.num) {
        this.$message.warning('购买数量不能为0')
      } else {
        if (this.cardStatus === 1 && !this.tag && this.balance > 0) {
          if (this.balance >= total) {
            commonServe
              .consumeInCanteenOrSuperMarket(this.id, total, 2)
              .then((res) => {
                console.log(res)
                if (res.code === 200) {
                  this.$message.success('消费成功')
                } else {
                  this.$message.warning('消费失败')
                }
              })
              .catch((err) => {
                this.$message.warning('消费失败' || err.message)
              })
            this.num = 0
            this.dialogVisible = false
          } else {
            this.$message.warning('账户余额不足')
          }
        } else {
          this.$message.warning('当前一卡通不处于正常状态，无法消费！')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.supermarket-container {
  .img-box {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .product-box {
    justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
    .product-item {
      flex: 0 0 48%;
      display: flex;
      justify-content: space-around;
      border-radius: 8px;
      margin: 10px 0;
      border: 2px solid #ececec;
      .imgs {
        width: 100px;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .count {
      width: 95px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      .el-button {
        width: 80px;
      }
    }
    .btn-buy {
      display: flex;
      justify-content: end;
    }
    .product-item:hover {
      box-shadow: #ccc 0px 10px 10px;
      border: 2px solid #3a62d7;
      transition: 0.5s;
      transform: translateY(-8px);
    }
  }
}
</style>
